<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import windyData from "@/data/windy"

export default {
  name: "AddToolbar.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {

      let prefix = `${window.location.origin}/maptalks-test-next/data/formats`

      new maptalks.control.Toolbar({
        "vertical": false,
        "position": "top-left",
        "items": [
          {
            item: "CSV",
            click: function () {
              maptalks.Formats.csv(`${prefix}/a.csv`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("csv");
                let layer = new maptalks.VectorLayer("csv", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "GeoJSON",
            click: function () {
              maptalks.Formats.geojson(`${prefix}/a.geojson`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("geojson");
                let layer = new maptalks.VectorLayer("geojson", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "GPX",
            click: function () {
              maptalks.Formats.gpx(`${prefix}/a.gpx`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("gpx");
                let layer = new maptalks.VectorLayer("gpx", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "KML",
            click: function () {
              maptalks.Formats.kml(`${prefix}/a.kml`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("kml");
                let layer = new maptalks.VectorLayer("kml", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "Polyline",
            click: function () {
              maptalks.Formats.polyline(`${prefix}/a.polyline`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("polyline");
                let layer = new maptalks.VectorLayer("polyline", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "TopoJSON",
            click: function () {
              maptalks.Formats.topojson(`${prefix}/a.topojson`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("topojson");
                let layer = new maptalks.VectorLayer("topojson", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "WKT",
            click: function () {
              maptalks.Formats.wkt(`${prefix}/a.wkt`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("wkt");
                let layer = new maptalks.VectorLayer("wkt", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          },
          {
            item: "osm",
            click: function () {
              maptalks.Formats.osm(`${prefix}/osm.osm`, function (err, geojson) {
                if (err) {
                  throw err;
                }
                map.removeLayer("osm");
                let layer = new maptalks.VectorLayer("osm", geojson).addTo(map);
                map.fitExtent(layer.getExtent());
              });
            }
          }
        ]
      }).addTo(map);
    }

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>